<template>
  <div class="select-policy">
    <el-dialog title="选择策略组" v-model="dialogVisible">
      <template #header>
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="策略名称" prop="filename">
            <el-input v-model="queryParams.name" placeholder="请输入策略名称" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <div class="content">
        <el-table ref="tableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="策略名称" />
          <el-table-column prop="accountId" label="管家账户ID" />
          <el-table-column prop="deliveryMode" label="投放模式" />
          <el-table-column prop="remark" label="备注" />
        </el-table>
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleGetTemplateList"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSelectPolicyGroup">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getProjectPromotionTemplateList } from '@/api/project';
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();

const props = defineProps(['isSelectPolicy']);
const emit = defineEmits(['update:isSelectPolicy', 'selectedRows']);
const dialogVisible = ref(false);
const loading = ref(true);

const queryFormRef = ref();
const total = ref(0);
const queryParams = reactive({
  name: '',
  accountId: '',
  pageNum: 1,
  pageSize: 10
});
const tableData = ref([]);
const tableRef = ref([]);
const selectedRows = ref([]);
watch(
  () => props.isSelectPolicy,
  (val) => {
    dialogVisible.value = val;
    console.log(dialogVisible.value, val);
    handleGetTemplateList();
  }
);
watch(
  () => dialogVisible.value,
  (val) => {
    emit('update:isSelectPolicy', val);
  }
);
// 选择策略组
const handleSelectPolicyGroup = () => {
  dialogVisible.value = false;
  emit('selectedRows', selectedRows.value);
};
// 获取列表
const handleGetTemplateList = () => {
  loading.value = true;
  queryParams.accountId = appStore.accountId;
  getProjectPromotionTemplateList(queryParams).then((res) => {
    tableData.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
};
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  handleGetTemplateList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.name = '';
  handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
  if (selection.length > 1) {
    // 取消之前的选择
    tableRef.value.clearSelection();
    // 只保留最后一个选择
    tableRef.value.toggleRowSelection(selection[selection.length - 1]);
    selectedRows.value = selection[selection.length - 1];
  } else {
    selectedRows.value = selection.length ? selection[0] : null;
  }
};
</script>

<style scoped></style>
